<template>
  <div>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
        <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-house" style="font-weight: bold">&nbsp;&nbsp;后台管理</i>
        </el-breadcrumb-item>
        <el-breadcrumb-item><i class="el-icon-s-claim">&nbsp;&nbsp;采购管理</i></el-breadcrumb-item>
        <el-breadcrumb-item><i class="el-icon-circle-plus">&nbsp;&nbsp;订单发票添加</i></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <div class="data-canRead" style="width: 100%;background-color: white;height: auto">
        <el-steps :active="2" finish-status="success" simple style="background-color: white">
          <el-step title="商品编码"></el-step>
          <el-step title="商品信息"></el-step>
          <el-step title="等待上步"></el-step>
          <el-step title="等待上步"></el-step>
        </el-steps>

        <el-divider></el-divider>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item label="商品名称:" prop="commodityName">
            <el-input v-model="ruleForm.commodityName" placeholder="请输入商品编码"></el-input>
          </el-form-item>
           <el-form-item label="供应商名称:" prop="companyName">
            <el-input v-model="ruleForm.companyName" placeholder="请输入供应商名称"></el-input>
          </el-form-item>
          <el-form-item label="规格:" prop="specs">
            <el-input v-model="ruleForm.specs" placeholder="请输入规格"></el-input>
          </el-form-item>
           <el-form-item label="数量:" prop="count">
            <el-input v-model="ruleForm.count" placeholder="请输入数量"></el-input>
          </el-form-item>
          <el-form-item label="订单金额:" prop="amount">
            <el-input v-model="ruleForm.amount" placeholder="请输入订单金额"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="warning" @click="backToPreStep()">上一步</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      ruleForm:{
        commodityCode:'',
        commodityName:'',
        specs:'',
        count:'',
        amount:'',
      },
      rules:{
        commodityCode:[
          {required: true, message: '请输入商品编码', trigger: 'blur'},
          {pattern: /^\d+$/, message: '商品编码必须是数字', trigger: 'blur'}
        ],
        commodityName:[
          {required: true, message: '请输入商品名称', trigger: 'blur'},
          {pattern: /[\u4E00-\u9FA5]/, message: "商品名称必须是中文入中文", trigger: 'blur'}
        ],
        amount:[
          {required: true, message: '请输入订单金额', trigger: 'blur'},
          {pattern: /^\d+$/, message: '订单金额必须是数字', trigger: 'blur'}
        ],
        specs:[
          {required: true, message: '请输入规格', trigger: 'blur'},
          {pattern: /^\d+$/, message: '规格必须是数字', trigger: 'blur'}
        ],
        count:[
          {required: true, message: '请输入数量', trigger: 'blur'},
          {pattern: /^\d+$/, message: '数量必须是数字', trigger: 'blur'}
        ]
      },
    }

  },

  methods: {
    loadLocalRuleForm() {
      let localRuleFormString = localStorage.getItem('localRuleForm');
      let localRuleForm = JSON.parse(localRuleFormString);
      //判断商品编号是否为空，是的话就返回第一步
      if (!localRuleForm || !localRuleForm.commodityCode) {
        this.$router.push('oderAndInvoiceAdd1');
        return;
      }

      //从第三步退回第二部
      if (localRuleForm.invoice) {//如果包含图片信息，就将第三部的信息存到第二部
        this.ruleForm = localRuleForm;
      } else {//如果不是第三步退回，就把第一步的信息给予
        this.ruleForm.commodityCode = localRuleForm.commodityCode;
      }
    },
    backToPreStep() {
      this.$router.push('oderAndInvoiceAdd1');
    },


    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          localStorage.setItem('localRuleForm', JSON.stringify(this.ruleForm));
          this.$router.push('oderAndInvoiceAdd3');
        }
      });
    },



    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    this.loadLocalRuleForm();
  }
}
</script>

<style scoped>
* {
  color: black;
}

.data-canRead {
  width: 380px;
  height: 380px;
  margin-top: 15px;
  box-shadow: 0px 5px 5px #8d858a;
  float: left;
  margin-right: 16px;
}

</style>